<template>
   <div>
    <button @click='showClick'>点击显示模态框</button>
    <detail :visible="visible" @on-cancel="cancel" @on-confirm="confirm"></detail>
   </div>
</template>



<script>
    import detail from './detail'
    export default {
        data(){
            return {
                // 声明开关
                visible:false
            }
        },
        methods:{
            // 绑定点击事件 父传
            showClick(){
                this.visible = true
            },
            // 取消按钮处理事件  取消确定可执行不同逻辑
            cancel(){
                this.visible = false
            },
            // 确定按钮处理事件
            confirm(){
                this.visible = false
            }
            
        },
        components:{
            detail
        }
    }
</script>
